<template>
  <div>
    <MainContentSearchBarWrapper>
      <SearchBar inline>
      <template #normal>
        <el-form-item label="事件名称">
          <el-input
            v-model="tableForm.name"
            clearable
            placeholder="请输入事件名称"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="事件分类">
          <el-select v-model="tableForm" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="设置快捷入口">
          <el-select v-model="tableForm.showInCanvas" placeholder="请选择">
            <el-option
              v-for="item in showInCanvasList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
<!--        <ins-cascader-filter @change="(value) => tableForm.queryInsIds = value"></ins-cascader-filter>-->
      </template>
      <template #toolbar>
        <el-form-item class="">
          <!-- <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button> -->
          <el-button type="primary" @click="isAdd = true">新建事件</el-button>
        </el-form-item>
      </template>
    </SearchBar>
    </MainContentSearchBarWrapper>

<!--    <MainContentActionsWrapper>-->
<!--      <el-button type="primary" @click="isAdd = true">新建事件</el-button>-->
<!--    </MainContentActionsWrapper>-->
    <div class="_content_list">
<!--      <div class="clueList">-->
<!--        &lt;!&ndash; <div class="clueList-title">事件列表</div> &ndash;&gt;-->
<!--        <div class="fr">-->
<!--          <el-button type="primary" @click="isAdd = true">新建</el-button>-->
<!--        </div>-->
<!--        <div class="clear-both"></div>-->
<!--      </div>-->
      <LayoutTable
        ref="ListTable"
        :url="url"
        disable-auto-height
        :param="tableForm"
      >
        <el-table-column
          prop="propertyKey"
          label="事件CODE"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="事件名称"
          min-width="150"
        ></el-table-column>
        <el-table-column prop="typeId" label="事件分类" min-width="150">
          <template #default="scope">
            <div>
              {{ typeFilters[scope.row.typeId] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="propertyType" label="类型" min-width="100">
          <template #default="scope">
            <div>
              {{ propertyTypeFormatter[scope.row.propertyType] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="startType" label="设置快捷入口" min-width="100">
          <template #default="scope">
            <div>
              {{ scope.row.showInCanvas == 0 ? "未设置" : "已设置" }}
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column
        prop="name"
        label="创建人"
        min-width="150"
      ></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)">
                编辑
              </el-button>
              <el-button @click="del(scope.row)" link type="primary">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </div>

    <list-dialog
      @closeListAdd="closeListAdd"
      :typeList="typeList"
      @addList="addList"
      :addData="addData"
      :isAdd="isAdd"
    ></list-dialog>
  </div>
</template>
<script>
import listDialog from "./listDialog.vue";
import EventApi from "@/api/eventApi";
export default {
  components: { listDialog },
  // filters: {
  //   classifyTypeFilters(val) {
  //     console.log('[ this.typeFilters ] >', this.typeFilters)
  //     console.log('[ val ] >', val)
  //     return this.typeFilters[val];
  //   },
  // },
  data() {
    return {
      url: "",
      isAdd: false,
      typeFilters: {},
      addData: { id: null },
      typeList: [],
      tableForm: {
        name: "",
        showInCanvas: "",
        queryInsIds: [],
      },
      propertyTypeFormatter: { 0: "数字", 1: "字符串", 2: "时间", 3: "日期" },
      showInCanvasList: [
        { id: 1, name: "已设置" },
        { id: 0, name: "未设置" },
      ],
    };
  },
  created() {
    this.getSimpleList();
  },
  methods: {
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
    },
    closeListAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    addList() {
      this.closeListAdd();
      this.onSearch();
    },
    async delCanvasPublicEventEntity(row) {
      let rs = await EventApi.delCanvasPublicEventEntity({ id: row.id, name: row.name });
      if (rs.code === 200) {
        ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.ListTable.search();
      });
    },
    del(row) {
      ElMessageBox.confirm("此操作将删除该事件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delCanvasPublicEventEntity(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm() {
      this.tableForm = {
        name: "",
        showInCanvas: "",
      };
      this.onSearch();
    },
    async getSimpleList() {
      let rs = await EventApi.getSimpleList();
      if (rs.code === 200) {
        let typeFilters = {};
        rs.payload.forEach((item) => {
          typeFilters[item.id] = item.name;
        });
        console.log("[  typeFilters] >", typeFilters);
        this.typeFilters = typeFilters;
        this.typeList = rs.payload;
        console.log("[ rs-getSimpleList ] >", rs);
        this.url = "/flow/canvasPublicEventEntity/pageList";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.search) {
  margin-bottom: 20px;
}

.clueList {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #2c313b;
  &-title {
    display: inline-block;
    span {
      font-weight: normal;
      font-size: 14px;
      margin-left: 10px;
      i {
        color: #6178ff;
        font-style: initial;
        margin: 3px;
      }
    }
  }
}
._content_list {
  //background: #fff;
  //padding: 16px 24px;
}
</style>
